<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			img {
				display: block;
			}
			/*.box {
				position: relative;
			}
			*/
			
			.mask {
				width: 150px;
				height: 150px;
				background-color: #FEDE4F;
				border: 1px solid #eee;
				opacity: .3;
				position: absolute;
				visibility: hidden;
			}
			
			.bg-big {
				width: 500px;
				height: 500px;
				background: url(01.jpg) no-repeat no-repeat;
				position: absolute;
				top: 0;
				left: 300px;
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="box" class="box">
			<img src="01.jpg" width="300" height="300" />
			<div id="mask" class="mask">
			</div>
			<div id="bgBig" class="bg-big">

			</div>

		</div>

		<script type="text/javascript">
			// 第一步：获取dom
			var imgs = document.getElementsByTagName("img")[0],
				mask = document.getElementById("mask"),
				bgBig = document.getElementById("bgBig");
			var pageX,
				pageY;
			// 第二步：鼠标移入图片时的一系列事件

			setInterval(function() {
				//				debugger
				mask.style.left = pageX + "px";
				mask.style.top = pageY + "px";

			});

			imgs.onmouseenter = function() {

				// 1. 获取鼠标所在的位置
				pageX = this.offsetLeft;
				pageY = this.offsetTop;

				console.log(pageX + pageY);
				// 2. 在当前位置显示遮罩层，并在图片的右边显示大图；
				mask.style.left = pageX;
				mask.style.top = pageY + "px";
				mask.style.display = "block";

				bgBig.style.display = "";

			}

			imgs.onmouseenter = function(event) {

				// 1. 获取鼠标所在的位置
				var event = event || window.event;
				var pageX = event.pageX,
					pageY = event.pageY;

				console.log(pageX + pageY);
				// 2. 在当前位置显示遮罩层，并在图片的右边显示大图；
				mask.style.left = pageX;
				mask.style.top = pageY + "px";
				mask.style.visibility = "visible";

				bgBig.style.display = "block";

			}
			imgs.onmouseleave = function() {
				mask.style.visibility = "hidden";
				bgBig.style.display = "none";
			}

			//	第二步：
		</script>

	</body>

</html>